<template>
  <div class="app-container page-container right-side-dialog">
    <!-- 操作按鈕 -->
    <div class="main-header">
      <el-row :gutter="20">
        <el-col :span="4" class="left">产品列表</el-col>
        <el-col :span="20" class="right">
          <span v-if="auth.save != -1" class="spp-btn spp-btn-primary" @click="productEditVisible = true">新增</span>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row :gutter="16" style="padding: 0 16px;">
        <el-col :span="8" style="margin-bottom:20px;" v-for="(item, k) in product_list_data" :key="k">
          <div class="product_card">
            <el-row class="product_header">
              <el-col :span="14">{{ item.product_name }}</el-col>
              <el-col :span="10" style="text-align: right;">
                <el-button size="mini" plain v-if="auth.update != -1" @click="productUpdate(item)">编辑</el-button>
                <el-button type="danger" size="mini" plain  v-if="item.status_flag ==='1' && auth.disable != -1" @click="productDisable(item.product_id)">停用</el-button>
                <el-button type="primary" size="mini" plain  v-if="item.status_flag ==='0' && auth.enable != -1" @click="productEnable(item.product_id)">启用</el-button>
              </el-col>
            </el-row>
            <div class="product_desc_view">
               <el-row>
                <el-col :span="16" class="product_desc">{{ item.product_desc?item.product_desc:'--' }}</el-col>
                <el-col :span="8" style="color: #3399ff;text-align: right;">
                  <span @click="setProductViewStatus(item.product_id)">
                    设备标准
                    <i v-if="!item.product_view_status" class="el-icon-arrow-down"></i>
                    <i v-else class="el-icon-arrow-up"></i>
                  </span>
                </el-col>
              </el-row>
            </div>
            <div v-if="item.product_view_status" style="border: 1px solid #dddddd;">
              <el-row class="product_cell">
                <el-col :span="12" class="lable">亲情电话</el-col>
                <el-col :span="12" class="value">
                  <span>{{ item.tel_num }}</span>
                  开通用户/台
                </el-col>
              </el-row>
              <el-row class="product_cell">
                <el-col :span="12" class="lable">M1考勤设备</el-col>
                <el-col :span="12" class="value">
                  <span>{{ item.att_m1_num }}</span>
                  开通用户/台
                </el-col>
              </el-row>
              <el-row class="product_cell">
                <el-col :span="12" class="lable">有源考勤设备</el-col>
                <el-col :span="12" class="value">
                  <span>{{ item.att_active_num }}</span>
                  开通用户/台
                </el-col>
              </el-row>
              <el-row class="product_cell">
                <el-col :span="12" class="lable">无源考勤设备</el-col>
                <el-col :span="12" class="value">
                  <span>{{ item.att_passive_num }}</span>
                  开通用户/台
                </el-col>
              </el-row>
              <el-row class="product_cell">
                <el-col :span="12" class="lable">LED考勤设备</el-col>
                <el-col :span="12" class="value">
                  <span>{{ item.att_led_num }}</span>
                  开通用户/台
                </el-col>
              </el-row>
              <el-row class="product_cell">
                <el-col :span="12" class="lable">人脸识别考勤设备</el-col>
                <el-col :span="12" class="value">
                  <span>{{ item.att_face_num }}</span>
                  开通用户/台
                </el-col>
              </el-row>
              <el-row class="product_cell">
                <el-col :span="12" class="lable">闸机考勤设备</el-col>
                <el-col :span="12" class="value">
                  <span>{{ item.att_gate_num }}</span>
                  开通用户/台
                </el-col>
              </el-row>
              <el-row class="product_cell">
                <el-col :span="12" class="lable">无障碍通道设备配备</el-col>
                <el-col :span="12" class="value">
                  <span>{{ item.att_accessibility_num }}</span>
                  开通用户/台
                </el-col>
              </el-row>
              <el-row class="product_cell">
                <el-col :span="12" class="lable"> 摄像头配备</el-col>
                <el-col :span="12" class="value">
                  <span>{{ item.camera_num }}</span>
                  开通用户/台
                </el-col>
              </el-row>
              <el-row class="product_cell">
                <el-col :span="12" class="lable">售饭机配备</el-col>
                <el-col :span="12" class="value">
                  <span>{{ item.meal_num }}</span>
                  开通用户/台
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 新增编辑产品类型 -->
    <el-dialog :title="product_edit_form.title" :visible.sync="productEditVisible" :close-on-click-modal="false" width="720px">
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <el-form ref="product_edit_form" label-width="20px" :model="product_edit_form">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="product_name">
                <div class="form_lable">产品类型</div>
                <el-input v-model="product_edit_form.product_name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="biz_type">
                <div class="form_lable">套餐类型</div>
                <el-select v-model="product_edit_form.biz_type" placeholder="请选择平台代码">
                  <el-option v-for="(value, key, index) in biz_type_dic" :key="index" :label="value" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="product_desc">
                <div class="form_lable">产品描述</div>
                <el-input v-model="product_edit_form.product_desc" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <div style="border: 1px solid #ddd;position: relative;border-radius: 5px;padding: 16px;margin-top: 16px;">
            <span style="position: absolute;top: -8px;left: 16px;background: #fff;padding: 0 8px;font-size: 16px;">配备标准</span>
            <el-row>
              <el-col :span="12">
                <el-form-item prop="tel_num">
                  <div class="form_lable">亲情电话</div>
                  <el-input v-model="product_edit_form.tel_num" type="number" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="att_m1_num">
                  <div class="form_lable">M1考勤设备</div>
                  <el-input v-model="product_edit_form.att_m1_num" type="number" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="att_active_num">
                  <div class="form_lable">有源考勤设备</div>
                  <el-input v-model="product_edit_form.att_active_num" type="number" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="att_passive_num">
                  <div class="form_lable">无源考勤设备</div>
                  <el-input v-model="product_edit_form.att_passive_num" type="number" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="att_led_num">
                  <div class="form_lable">LED考勤设备</div>
                  <el-input v-model="product_edit_form.att_led_num" type="number" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="att_face_num">
                  <div class="form_lable">人脸识别考勤设备</div>
                  <el-input v-model="product_edit_form.att_face_num" type="number" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="att_gate_num">
                  <div class="form_lable">闸机考勤设备</div>
                  <el-input v-model="product_edit_form.att_gate_num" type="number" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="att_accessibility_num">
                  <div class="form_lable">无障碍通道设备</div>
                  <el-input v-model="product_edit_form.att_accessibility_num" type="number" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="camera_num">
                  <div class="form_lable">摄像头配备</div>
                  <el-input v-model="product_edit_form.camera_num" type="number" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="meal_num">
                  <div class="form_lable">售饭机配备</div>
                  <el-input v-model="product_edit_form.meal_num" type="number" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </el-scrollbar>
      <div class="dialog-btn" style="text-align: right">
        <span class="spp-btn" @click="productEditVisible = false">取消</span>
        <span class="spp-btn spp-btn-primary" @click="productEditSubmit()">保存</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { list, save, update, disable, enable } from '@/api/pajx/pajx/product'
import { biz_type } from '@/api/public'
import { mapState } from 'vuex'
export default {
  name: 'PajxProduct',
  components: { },
  data() {
    return {
      height: window.innerHeight - 135,
      auth: {},
      product_list_data: [],
      productEditVisible: false,
      biz_type_dic: {},
      product_edit_form: {
        title: '新增产品类型',
        type: 'add',
        product_name: '',
        product_desc: '',
        tel_num: 0,
        att_m1_num: 0,
        att_active_num: 0,
        att_passive_num: 0,
        att_led_num: 0,
        att_face_num: 0,
        att_gate_num: 0,
        att_accessibility_num: 0,
        camera_num: 0,
        meal_num: 0,
        biz_type: ''
      }
    }
  },
  computed: {
    ...mapState({
      permission: state => state.permission.permission
    })
  },
  watch: {
    productEditVisible(val) {
      if (val) {
        this.product_edit_form.title = this.product_edit_form.type==='add'?'新增产品类型':'编辑产品类型'
      }
      if (!val) {
        this.product_edit_form.product_name = ''
        this.product_edit_form.product_desc = ''
        this.product_edit_form.tel_num = 0
        this.product_edit_form.att_m1_num = 0
        this.product_edit_form.att_active_num = 0
        this.product_edit_form.att_passive_num = 0
        this.product_edit_form.att_led_num = 0
        this.product_edit_form.att_face_num = 0
        this.product_edit_form.att_gate_num = 0
        this.product_edit_form.att_accessibility_num = 0
        this.product_edit_form.camera_num = 0
        this.product_edit_form.meal_num = 0
        this.product_edit_form.biz_type = ''
        this.product_edit_form.type = 'add'
      }
    }
  },
  methods: {
    // 获取按钮权限
    permissionAuth() {
      this.auth.save = this.permission.indexOf('/api/pajx/product/save')
      this.auth.update = this.permission.indexOf('/api/pajx/product/update')
      this.auth.disable = this.permission.indexOf('/api/pajx/product/disable')
      this.auth.disable = this.permission.indexOf('/api/pajx/product/disable')
    },
    // 获取套餐类型字典
    getBizTypeDic() {
      biz_type().then(response => {
        this.biz_type_dic = response.data
      })
    },
    // 获取列表数据
    getProductListData() {
      list().then(response => {
        response.data.forEach(function( val, index ) {
          val.product_view_status = true
        })
        this.product_list_data = response.data
      })
    },
    // 新增编辑产品类型
    productEditSubmit() {
      // 新增
      if (this.product_edit_form.type === 'add') {
        save(this.product_edit_form).then(response => {
          this.productEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getProductListData()
        })
      }
      // 修改
      if (this.product_edit_form.type === 'edit') {
        update(this.product_edit_form).then(response => {
          this.productEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getProductListData()
        })
      }
    },
    // 修改回显
    productUpdate(data) {
      this.productEditVisible = true
      this.product_edit_form.product_name = data.product_name
      this.product_edit_form.product_desc = data.product_desc
      this.product_edit_form.tel_num = data.tel_num
      this.product_edit_form.att_m1_num = data.att_m1_num
      this.product_edit_form.att_active_num = data.att_active_num
      this.product_edit_form.att_passive_num = data.att_passive_num
      this.product_edit_form.att_led_num = data.att_led_num
      this.product_edit_form.att_face_num = data.att_face_num
      this.product_edit_form.att_gate_num = data.att_gate_num
      this.product_edit_form.att_accessibility_num = data.att_accessibility_num
      this.product_edit_form.camera_num = data.camera_num
      this.product_edit_form.meal_num = data.meal_num
      this.product_edit_form.biz_type = data.biz_type
      this.product_edit_form.product_id = data.product_id
      this.product_edit_form.type = 'edit'
    },
    // 点击展开隐藏设备
    setProductViewStatus(product_id) {
      this.product_list_data.forEach(function( val, index ) {
        if(val.product_id === product_id){
          val.product_view_status = !val.product_view_status
        }
      })
    },
    // 停用产品
    productDisable(product_id) {
      this.$confirm('确认要停用该产品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        disable(product_id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getProductListData()
        })
      }).catch(() => {})
    },
    // 启用产品
    productEnable(product_id) {
      this.$confirm('确认要启用该产品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        enable(product_id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getProductListData()
        })
      }).catch(() => {})
    }
  },
  created() {
    this.permissionAuth()
    this.getBizTypeDic()
    this.getProductListData()
  }
}
</script>
<style lang="scss">
.product_card{
  background: #ffffff;
  border-radius: 5px;
  padding: 16px;
  border: 1px solid #E1E2E6;
  box-shadow: 0px 3px 5px #E1E3E6;
  .product_header{
    border-bottom: 1px solid #E1E2E6;
    padding-bottom: 5px;
    color: #3399ff;
    line-height: 26px;
  }
  .product_desc_view{
    font-size: 14px;
    line-height: 40px;
    .product_desc{
      color: #7C7C7C;
    }
  }
  .product_cell{
    border-bottom: 1px solid #E1E2E6;
    line-height: 34px;
    font-size: 14px;
    .lable{
      background: #F5F5F5;
      padding-left: 16px;
    }
    .value{
      background: #FAFAFA;
      color: #A2A2A2;
      text-align: right;
      border-left: 1px solid #E1E2E6;
      padding-right: 16px;
      span{
        color: #F96752;
      }
    }
  }
}
</style>
